<template>
    <div class="ma-content-block lg:flex justify-between p-4">
        <div class="app-container">
            <div class="container-header">
                <div class="container-header-tr">
                    <div>
                        <span class="s1">用户名称</span>
                        <a-input
                            v-model="form.task_name"
                            placeholder="请输入用户名称"
                        />
                    </div>
                    <div>
                        <div class="btn mr20" @click="searchButton">
                            <icon-search class="mr6" />
                            搜索
                        </div>
                        <div class="btn gray" @click="resetButton">
                            <icon-delete class="mr6" />
                            重置
                        </div>
                    </div>
                </div>
            </div>
            <!-- <div class="container-head">
            <a-form :model="form">
                <a-row :gutter="16">
                    <a-col :span="6">
                        <a-form-item
                            field="task_name"
                            label="用户名称"
                            label-col-flex="80px"
                        >
                            <a-input
                                v-model="form.task_name"
                                placeholder="请输入用户名称"
                            />
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row
                    class="formButton"
                    :gutter="24"
                    style="text-align: center"
                >
                    <a-col :span="2">
                        <a-button type="primary" @click="searchButton">
                            <template #icon><icon-search /></template>
                            搜索
                        </a-button>
                    </a-col>
                    <a-col :span="2">
                        <a-button @click="resetButton">
                            <template #icon><icon-delete /></template>
                            重置
                        </a-button>
                    </a-col>
                </a-row>
            </a-form>
        </div> -->
            <div class="container-content">
                <div class="container-content-button"></div>
                <div class="container-content-table">
                    <a-table
                        :columns="columns"
                        :data="tableList"
                        :loading="loading"
                        row-key="id"
                        :pagination="false"
                    >
                        <template #status="{ record }">
                            <span v-if="record.status == 1">未开始</span>
                            <span v-if="record.status == 2">进行中</span>
                            <span v-if="record.status == 3">停止</span>
                            <span v-if="record.status == 4">已完成</span>
                        </template>
                        <template #operate="{ record }">
                            <a-button
                                size="mini"
                                type="text"
                                @click="toDetail(record.id)"
                                >详情</a-button
                            >
                        </template>
                    </a-table>
                    <div
                        class="_crud-footer mt-3 text-right"
                        ref="crudFooterRef"
                    >
                        <a-pagination
                            :total="pageList.total"
                            show-total
                            show-jumper
                            show-page-size
                            @page-size-change="getList"
                            @change="getList"
                            v-model:current="form.page"
                            v-model:page-size="form.pageSize"
                            style="display: inline-flex"
                        />
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import { reactive, ref, getCurrentInstance } from 'vue';
import { getProjectList } from '@/api/cloud/client.js';
import { useRouter } from 'vue-router';
import { $request } from '@/utils/request.js';
import { useUserStore } from '@/store';

const user = useUserStore().user;
const { proxy } = getCurrentInstance();
const router = useRouter();
const loading = ref(true);
// 控制对话框
const visible = ref(false);
// 绑定项目表单
const bandForm = ref({});
const columns = [
    {
        title: '任务名称',
        dataIndex: 'task_name',
        slotName: 'task_name'
    },
    {
        title: '预计发送',
        dataIndex: 'num_of_message',
        slotName: 'num_of_message'
    },
    {
        title: '发送成功',
        dataIndex: 'num_of_success',
        slotName: 'num_of_success'
    },
    {
        title: '发送失败',
        dataIndex: 'num_of_failed_sent',
        slotName: 'num_of_failed_sent'
    },
    {
        title: '状态',
        dataIndex: 'status',
        slotName: 'status'
    },
    {
        title: '创建时间',
        dataIndex: 'created_at'
    },
    {
        title: '操作',
        dataIndex: 'operate',
        minWidth: 80,
        slotName: 'operate'
    }
];

const form = ref({
    task_name: '',
    page: 1,
    pageSize: 10
});
const tableList = ref([]);
const pageList = reactive({
    total: 0
});
// 获取列表数据
const getList = () => {
    loading.value = true;
    let params = {
        ...form.value,
        user_id: user.id
    };
    $request
        .get('/TcardClient/tphonenumberDetail/getList', params)
        .then(({ items, pageInfo }) => {
            tableList.value = items;
            pageList.value = pageInfo;
            loading.value = false;
        });
    // getListByUser(form.value).then((res) => {
    //     tableList.value = res.data.items;
    //     pageList.value = res.data.pageInfo;
    //     loading.value = false;
    // });
};
getList();
// 搜索
const searchButton = () => {
    getList();
};
const reset = () => {
    form.value.task_name = '';
    form.value.page = 1;
    form.value.pageSize = 10;
};

const resetButton = () => {
    reset();
    getList();
};
//   进入详情
const toDetail = async (id) => {
    try {
        await router.push({ name: 'korea:taskDetail', query: { id } });
    } catch (error) {
        if (error.isNavigationFailure) {
            // 处理导航失败的情况
            console.error('Navigation failed due to permissions', error);
        } else {
            proxy.$message.error('没有权限');
        }
    }
};
</script>
<script>
export default { name: 'korea:taskList' };
</script>
<style lang="less" scoped>
@import url('@/style/layout.less');
.app-container {
    .container-head {
        padding: 20px;
        .formButton {
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }
    .container-content {
        padding: 16px;
        padding-top: 10px;
        .container-content-button {
            margin-bottom: 10px;
            .arco-btn {
                margin-right: 10px;
            }
        }
    }
}
.dialog-foot {
    text-align: end;
}
</style>
